import React, {Component} from 'react';
import "./index.less"
import {Modal} from "antd";
import ModuleHeader from "../ModuleHeader";
import {AxioInstance} from "../../api/AxiosHelper";
import {GET_RECOMMEND_NEWS, SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import moment from 'moment';
import {inject, observer} from "mobx-react";

const {confirm} = Modal;

@inject("globalStore")
@observer
class NoticeCenter extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            messages: null
        }
    }

    componentDidMount() {
        AxioInstance.get(`${GET_RECOMMEND_NEWS}?count=9`)
            .then((resp: any) => {
                //console.log(resp)
                this.setState({
                    messages: resp
                });
            }).catch((e) => console.error(e));
    }

    showConfirm() {
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        window.open(`${window.location.origin}/${DOMAIN_NAME}/newsCenter`);
    }

    render() {
        const {messages} = this.state;
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        return (
            <div className="courseContainer" style={{
                height: "5.6rem",
            }}>
                <ModuleHeader title="新闻中心" onclick={this.showConfirm}/>
                <div className="notice-body">
                    <div className="notice-main" onClick={() => {
                        window.open(`${window.location.origin}/${DOMAIN_NAME}/news?id=${messages?.[0].id}`)
                    }}>
                        <img src={SERVER_PICTURE_URL + (messages?.[0]?.image || "default.png")} alt={"新闻图片"}/>
                    </div>
                    <div className="notice-list">
                        {
                            this.state.messages?.map((element, index) => {
                                return <div key={index} className="notice-select"
                                            onClick={() => {
                                                window.open(`${window.location.origin}/${DOMAIN_NAME}/news?id=${element.id}`)
                                            }}>
                                    <img style={{
                                        width: "0.1rem",
                                        height: "0.15rem",
                                        marginTop: "0.06rem",
                                        marginRight: "0.2rem"
                                    }}
                                         src={"./ui/Notice/notice-arrow.png"} alt={""}/>
                                    <span className="hide-text-1-column"
                                          style={{
                                              width: "80%",
                                              height: "0.3rem"
                                          }}>{element.title}</span>
                                    <span style={{
                                        width: "15%",
                                        textAlign: "right"
                                    }}>[{moment(element.updatedTime).format("MM-DD")}]</span>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default NoticeCenter;